<template>
	<view>
		<view class="head">

			<view class="title">用餐信息</view>

			<view class="i_box fs">
				<view>标准价格</view>
				<view class="hui">{{info.fw}}</view>
			</view>
			<view class="i_box fs">
				<view>标准加工</view>
				<view class="hui">{{info.num}}道</view>
			</view>
			<view class="i_box fs" @click="open">
				<view>用餐时间</view>
				<view class="hui">
					<text v-if="timeText">{{timeText}}</text>
					<u-icon v-else name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="i_box fs" @click="$project.toPath('/pages/addressMange/index')">
				<view>用餐地点</view>
				<view class="hui a_box">
					<view style="font-size: 24rpx;" v-if="address.id">{{address.area}}{{address.address}}</view>
					<u-icon v-else name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="i_box fs">
				<view>额外加工</view>
				<u-number-box v-model="form.ewnum" @change="valChange"></u-number-box>
			</view>
			<view class="i_box">
				<view>备注</view>
				<textarea v-model="form.remark" class="te"></textarea>
			</view>
		</view>

		<!-- <view class="content">
			<view class="c_name">厨师详情</view>
			<rich-text :nodes="info.content"></rich-text>
		</view> -->

		<view class="head">
			<view>账单明细</view>
			<view class="i_box fs text">
				<view>级别服务费</view>
				<view class="hui">¥ {{info.fw}}</view>
			</view>
			<view class="i_box fs text" v-if="form.ewnum>0">
				<view>菜品价格</view>
				<view class="hui">¥ {{info.ew}} * {{form.ewnum}}</view>
			</view>
		</view>


		<view class="head">
			<view>支付方式</view>
			<u-radio-group v-model="form.pay_type" placement="column" activeColor='#FF7133'>
				<view :class="['i_box','fs',index<payList.length-1?'border':'']" v-for="(item, index) in payList">
					<view class="b_flex_c">
						<view v-if='item.id==1' class="iconfont iconweixinzhifu" style="color:#09BB07;"> </view>
						<view v-if='item.id==2' class="iconfont iconfeiyong" style="color:#FFB92C;"> </view>
						<view class="pay_text">{{item.name}}</view>
						<view class="yu" v-if="item.id==2&&user.money>=0">(可用{{user.money}})</view>
					</view>
					<u-radio :disabled="item.id==2&&user.is" :key="index" label=" " :name="item.id">
					</u-radio>
				</view>
			</u-radio-group>
		</view>


		<view class="pay-method xy_box">

			*注意事项

			<div class='xy_content'>

				<rich-text :nodes="info.content"></rich-text>

			</div>

		</view>


		<view :class="[system=='ios'?'tcs':'tc']"></view>

		<view :class="['bottom_box',system=='ios'?'pm':'']">
			<view class="money">¥ {{payMoney}}</view>
			<view class="btn" @click="setPay()">立即结算</view>
		</view>

        <passkeyborad :show="show" @complte="moneyPay" @close="show=false" :price="payMoney"></passkeyborad>

		<uvdatetimepicker @confirm="timeconfirm" :filter="filter" :minDate="stime" :maxDate="etime"
			:formatter="formatter" ref="datetimePicker" v-model="time" mode="datetime"></uvdatetimepicker>

	</view>
</template>

<script>
	import uvdatetimepicker from "@/uni_modules/uv-datetime-picker/components/uv-datetime-picker/uv-datetime-picker.vue";
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	export default {
		components: {
			uvdatetimepicker,
			passkeyborad
		},
		data() {
			return {
				stime: '',
				etime: '',
				info: {},
				system: '',
				form: {
					remark: '',
					ewnum: 0,
					yc_time: '',
					cprice: 0,
					pay_type: 1,
					password:''
				},
				timeText: '',
				address: {
					id: ''
				},
				order: {},
				payMoney: 0,
				payList: [{
					id: 1,
					name: '微信支付',
					img: ''
				}, {
					id: 2,
					name: '余额支付',
					img: ''
				}],
				user: {
					money: 0,
					is: true
				},
				showPay:false,
				show:false
			}
		},
		onLoad(e) {
			if (e.id) {
				this.getInfo(e.id);
			}
			this.system = uni.getSystemInfoSync().platform;
			this.getStime();
			this.getEtime();
		},
		onShow() {
			let address = uni.getStorageSync('address');
			if (address) {
				address = JSON.parse(address);
				console.log(address);
				this.address = address;
			}
            this.isSetPwd();
		},
		methods: {
			isSetPwd() {
				let that = this;
				that.$get(that.$api.userIsset_pay_password, {
					token: uni.getStorageSync('userInfo').token
				}, (res) => {
					this.showPay = res.data.data;
				})
			},
			getUser() {
				let params = {
					token: uni.getStorageSync('userToken')
				}
				this.$get(this.$api.userInfo, params, (res) => {
					let {
						code,
						data
					} = res.data;
					if (code == 1) {
						this.user.money = data.money;
						if (data.money >= this.payMoney) {
							this.user.is = false;
						} else {
							this.user.is = true;
						}
					}
				})
			},
			setPay(){
				
				if(!this.form.yc_time){
					return this.$project.toast('请选择用餐时间');
				}
				
				if(this.form.pay_type==1){
					this.submit();
				}
				if(this.form.pay_type==2){
					if(this.showPay){
						this.show=true;
					}else{
						this.$showModal('是否设置支付密码', (res) => {
							uni.navigateTo({
								url: '/pages/user/setPay'
							})
						})
						
						return;
					}
				}
				
			},
			moneyPay(e){
				this.form.password=e;
				this.submit();
			},
			submit() {
				
				let form = JSON.parse(JSON.stringify(this.form));
				form.token = uni.getStorageSync('userToken');
				form.id = this.info.id;
				form.address_id = this.address.id;
				this.$post(this.$api.corder, form, res => {
					let {
						code,
						data
					} = res.data;
					if (code != 1) return;
					this.order = data;
					
					if(data.isPay){
						this.pay();
					}else{
						uni.reLaunch({
							url: '/pages/shopcart/paySuccess?type=2',
							success() {
						
							}
						})
					}
					
					
				});
			},
			pay() {
				this.$post(this.$api.cpay, {
					id: this.order.id,
					token: uni.getStorageSync('userToken')
				}, ress => {
					let {
						code,
						data
					} = ress.data;
					if (code != 1) return;

					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							_.$Toast('支付成功');
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/shopcart/paySuccess?type=2',
									success() {

									}
								})
							}, 500)

						},
						fail: function(err) {
							_.$Toast('支付取消');
						}
					});
				});
			},
			valChange(e) {
				this.form.cprice = Number(e.value * this.info.ew);
				this.payMoney = (Number(this.info.fw) + this.form.cprice).toFixed(2);

				if (this.user.money >= this.payMoney) {
					this.user.is = false;
				} else {
					this.user.is = true;
				}

			},
			filter(type, options) {
				if (type === 'hour') {
					let op = [];
					options.forEach(e => {

						if (Number(e) >= 10 && Number(e) <= 20) {
							op.push(e);
						}

					});

					return op;
				}
				return options;
			},
			formatter(type, value) {

				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {


					return `${value}时`



				}
				if (type === 'minute') {
					return `${value}分`
				}


			},
			open() {
				this.$refs.datetimePicker.open();
			},
			timeconfirm(e) {
				this.timeText = this.$project.changeTime(e.value, 3, 2);
				this.form.yc_time = e.value;
			},
			getInfo(id) {
				this.$get(this.$api.chefInfo, {
					id: id,
					type: 2
				}, res => {
					let {
						code,
						data
					} = res.data;
					if (code == 1) {

						if (data.content) {

							data.content = this.$formatRichText(data.content).replace(/src="\//g,
								'src="' + getApp().globalData
								.imgRemote + '/');
						}

						this.info = data;
						this.payMoney = Number(data.fw);
						this.getUser();
					}
				});
			},
			getStime() {

				// 获取当前时间
				var now = new Date();

				// 设置时间为明天的0时0分
				now.setDate(now.getDate() + 1);
				now.setHours(10, 0, 0, 0); // 设置小时、分钟、秒和毫秒为0

				// 获取时间戳（以毫秒为单位）
				var timestamp = now.getTime();
				this.stime = timestamp;
			},
			getEtime() {

				// 获取当前时间
				var now = new Date();

				// 获取当前月份的下一个月
				var nextMonth = now.getMonth() + 1;
				var nextYear = now.getFullYear();

				// 如果下一个月是12月，则年份需要加1，月份设置为0（表示1月）
				if (nextMonth === 12) {
					nextMonth = 0;
					nextYear++;
				}

				// 创建一个表示下个月第一天的Date对象
				var firstDayOfNextMonth = new Date(nextYear, nextMonth, 1);

				// 获取下个月的天数（根据下个月的第一天计算）
				var daysInNextMonth = new Date(firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth() + 1, 0)
					.getDate();

				var lastDayOfNextMonth = new Date(firstDayOfNextMonth.getFullYear(), firstDayOfNextMonth.getMonth(),
					daysInNextMonth);

				// 获取时间戳（以毫秒为单位）
				var timestamp = lastDayOfNextMonth.getTime();
				this.etime = timestamp;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.iconfont {
		margin-right: 10rpx;
		font-size: 40rpx;
	}


	.b_flex_c {
		display: flex;
		align-items: center;
	}

	.head {
		box-sizing: border-box;
		padding: 30rpx 30rpx 0 30rpx;
		border-radius: 15rpx;
		background-color: white;
		margin: 25rpx;
	}

	.fs {
		display: flex;
		justify-content: space-between;
	}

	.i_box {
		box-sizing: border-box;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F5F6F7;
		font-size: 28rpx;
	}

	.te {
		height: 120rpx;
		width: 100%;
	}

	.text {
		color: #888888;
		font-size: 26rpx;
	}

	.hui {
		color: #969799;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.title {
		font-size: 36rpx;
		margin-bottom: 10rpx;

	}

	.num_box {
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.num {
		font-size: 24rpx;
		color: #A1A1A1;
		margin-left: 15rpx;
	}

	.label_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.money {
		font-size: 40rpx;
		color: #D73535;
		font-weight: bold;
	}

	.label {
		font-size: 24rpx;
		margin: 15rpx 10rpx 0 0;
		background-color: #F7ECE4;
		color: #EF8200;
		box-sizing: border-box;
		padding: 6rpx 20rpx;
		border-radius: 10rpx;
	}

	.content {
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
		min-height: 60vh;
	}

	.c_name {
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		border-top: 1rpx solid #DDDDDD;
		display: flex;
		align-items: center;
	}

	.btn {
		width: 220rpx;
		background-color: #EF8200;
		color: white;
		text-align: center;
		box-sizing: border-box;
		padding: 20rpx 0;
		border-radius: 15rpx;
		font-size: 26rpx;
		margin-left: auto;
	}

	.pm {
		padding-bottom: 50rpx;
	}

	.tc {
		height: 68px;
	}

	.tcs {
		height: 78px;
	}

	.a_box {
		width: 75%;
	}

	.xy_box {
		box-sizing: border-box;
		padding: 0rpx 30rpx;
	}

	.xy_content {
		margin-top: 10rpx;
	}
</style>